<template>
  <div class="contract-approval-page">
    <div class="page-header">
      <h2>
        <el-icon><Checked /></el-icon>
        合同审批
      </h2>
    </div>

    <el-tabs v-model="activeTab">
      <!-- 待我审批 -->
      <el-tab-pane label="待我审批" name="pending">
        <el-badge :value="pendingList.length" class="tab-badge">
          <el-card shadow="never">
            <el-table :data="pendingList" stripe>
              <el-table-column prop="code" label="合同编号" width="150" />
              <el-table-column prop="name" label="合同名称" min-width="200" />
              <el-table-column prop="amount" label="合同金额" width="120" align="right">
                <template #default="{ row }">
                  ¥{{ formatAmount(row.amount) }}
                </template>
              </el-table-column>
              <el-table-column prop="submitter" label="申请人" width="100" />
              <el-table-column prop="submitTime" label="提交时间" width="160" />
              <el-table-column label="操作" width="150">
                <template #default="{ row }">
                  <el-button type="primary" size="small" @click="handleApprove(row)">
                    审批
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-badge>
      </el-tab-pane>

      <!-- 我已审批 -->
      <el-tab-pane label="我已审批" name="approved">
        <el-card shadow="never">
          <el-table :data="approvedList" stripe>
            <el-table-column prop="code" label="合同编号" width="150" />
            <el-table-column prop="name" label="合同名称" min-width="200" />
            <el-table-column prop="approvalResult" label="审批结果" width="100">
              <template #default="{ row }">
                <el-tag :type="row.approvalResult === 'approved' ? 'success' : 'danger'">
                  {{ row.approvalResult === 'approved' ? '通过' : '驳回' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="approvalTime" label="审批时间" width="160" />
            <el-table-column prop="comment" label="审批意见" show-overflow-tooltip />
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 审批对话框 -->
    <el-dialog
      v-model="showApprovalDialog"
      title="合同审批"
      width="900px"
    >
      <div v-if="currentContract" class="approval-dialog">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="合同编号">{{ currentContract.code }}</el-descriptions-item>
          <el-descriptions-item label="合同名称">{{ currentContract.name }}</el-descriptions-item>
          <el-descriptions-item label="合同金额">
            ¥{{ formatAmount(currentContract.amount) }}
          </el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentContract.submitter }}</el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <el-form :model="approvalForm" label-width="100px">
          <el-form-item label="审批结果" required>
            <el-radio-group v-model="approvalForm.result">
              <el-radio label="approved">通过</el-radio>
              <el-radio label="rejected">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审批意见">
            <el-input
              v-model="approvalForm.comment"
              type="textarea"
              :rows="4"
              placeholder="请输入审批意见..."
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="showApprovalDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitApproval" :loading="submitting">
          提交
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Checked } from '@element-plus/icons-vue'

const activeTab = ref('pending')
const showApprovalDialog = ref(false)
const submitting = ref(false)
const currentContract = ref(null)

const approvalForm = reactive({
  result: 'approved',
  comment: ''
})

const pendingList = ref([
  {
    id: 1,
    code: 'CT2024005',
    name: '市场推广服务合同',
    amount: 250000,
    submitter: '张三',
    submitTime: '2024-04-01 09:30'
  },
  {
    id: 2,
    code: 'CT2024006',
    name: '设备采购合同',
    amount: 180000,
    submitter: '李四',
    submitTime: '2024-04-02 14:20'
  }
])

const approvedList = ref([
  {
    id: 1,
    code: 'CT2024003',
    name: '产品销售合同',
    approvalResult: 'approved',
    approvalTime: '2024-03-15 10:30',
    comment: '同意签订'
  },
  {
    id: 2,
    code: 'CT2024004',
    name: '办公楼租赁合同',
    approvalResult: 'approved',
    approvalTime: '2024-01-10 16:45',
    comment: '租金合理，同意'
  }
])

const formatAmount = (amount) => {
  return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 })
}

const handleApprove = (row) => {
  currentContract.value = row
  approvalForm.result = 'approved'
  approvalForm.comment = ''
  showApprovalDialog.value = true
}

const handleSubmitApproval = () => {
  submitting.value = true
  setTimeout(() => {
    submitting.value = false
    showApprovalDialog.value = false
    ElMessage.success('审批成功')
    // 刷新列表
    const index = pendingList.value.findIndex(item => item.id === currentContract.value.id)
    if (index !== -1) {
      pendingList.value.splice(index, 1)
    }
  }, 1000)
}
</script>

<style scoped>
.contract-approval-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tab-badge {
  width: 100%;
}

.approval-dialog {
  padding: 10px 0;
}
</style>

